<%include file="include/head.html"%>
<div class="wrapper">
  <div id="div-home" class="main-info-box">
    <%include file="include/crumbs.html"%>
    <%include file="include/edit_nav.html"%>
    <div class="div-info-body">

      <%if $error%>
      <%$error%>
      <%else%>
      <link rel="stylesheet" type="text/css" href="<%$CSS_DIR%>/imgareaselect-animated.css"/>
      <div class="register_complete">
	为了区分其他同名的用户，请为他/她添加头像。
	<form action="/users/update_figure" method="post">
	  <input required class="required" type="hidden" name="userid" value="<%$userid%>"/>
	  <input required class="required" type="hidden" name="photo" value="<%$photo%>"/>
	  <input required class="required" type="hidden" name="width" value=""/>
	  <input required class="required" type="hidden" name="height" value=""/>
	  <input required class="required" type="hidden" name="x1" value=""/>
	  <input required class="required" type="hidden" name="x2" value=""/>
	  <input required class="required" type="hidden" name="y1" value=""/>
	  <input required class="required" type="hidden" name="y2" value=""/>    

	  <div class="container">
	    <p>
	      <img style="float: left; margin-right: 10px;" alt="photo for figure"
		   width="50%" src="<%$photo%>" id="original">
	    </p>
	  </div>
	  <input class="ym-button" type="submit" value="保存"/>
	</form>
      </div>
      <div id="msg">
      </div>
      <%/if%>
    </div>
    <div class="clear">
    </div>
  </div>
  <script src="<%$JS_DIR%>/jquery.imgareaselect.js"></script>
<script>
    function log(str)
{
    $("#msg").html($("#msg").html()+ str+"<br/>");
}
function clearlog()
{
    $("#msg").html('');
}
function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    // clearlog();  
    // log("img width: "+img.clientWidth);
    // log("img heightr: "+img.clientHeight);
    // log("x1: "+selection.x1);
    // log("y1: "+selection.y1);
    // log("x2: "+selection.x2);
    // log("y2: "+selection.y2);
    $("input[name=x1]").val(selection.x1);
    $("input[name=y1]").val(selection.y1);
    $("input[name=x2]").val(selection.x2);
    $("input[name=y2]").val(selection.y2);

    $('#original + div > img').css({
        width: Math.round(scaleX * img.clientWidth) + 'px',
        height: Math.round(scaleY * img.clientHeight) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });

}

$(document).ready(function () {
    $('<div><img src="<%$photo%>" style="position: relative;" /><div>')
        .css({
            float: 'left',
            position: 'relative',
            overflow: 'hidden',
            width: '100px',
            height: '100px'
        })
        .insertAfter($('#original'));

    $('#original').imgAreaSelect({ x1:0, x2:100, y1:0, y2:100, aspectRatio: '1:1', onSelectChange: preview });
    $("input[name=width]").val($('#original')[0].clientWidth);
    $("input[name=height]").val($('#original')[0].clientHeight);
});
</script>
</div>
<%include file="include/bottom.html"%>
